{% extends "personal_center/base.html" %}

{% block page_link %}
    <script src="../../static/system_setup/js/UserList.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">
    <script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        input {
            padding-left: 1%;
        }
        .search {
            width: 70%;float: right;text-align: right;margin: 5.5px 0;margin-right: 0.5%;
        }
        .search input {
            vertical-align: middle;display: inline-block;height: 29px;width: 200px;outline: none;margin-left: 10px;border: 1px solid #0070c1;box-sizing: border-box;border-radius: 2px;
        }
        .search button {
            display: inline-block;height: 29px;line-height: 29px;width: 100px;background-color: #0070c1;color: white;border-style: none;outline: none;border-radius: 2px;margin-left: 10px;
        }

    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div class="search">
            <select name="" id="travel_type" style="border: 1px solid #0070c1;height: 29px;width: 200px;outline: none;">
                <option value="0">请选择出差类型</option>
                <option value="one">学术会议出差</option>
                <option value="two">进修出差</option>
                <option value="three">行政出差</option>
                <option value="four">其它</option>
            </select>
            
            <input type="text" placeholder="出差开始时间" id="StartTime" value="">

            <input type="text" placeholder="出差结束时间" id="EndTime" value="">

            <input type="text" placeholder="请输入搜索关键词..." id="search_data" value="">
{#            <input type="text" placeholder="请输入搜索关键词..." name="user" id="search_data" value="">#}
            <button class="search-action">搜索</button>
        </div>

    </div>

    <div id="my_application" style="width: 100%;height: 95%;overflow: auto;background-color: white;">
        <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
            <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <section class="grid-main" style="height: 100%;">
                    <table id="main_table"></table>
                </section>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/personnel/js/demo.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("SystemReport").style.display = "block";
            document.getElementById("TravelApplicationReport").className = "add-nav-active";

        };

        const gridManagerName = "test",
            TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
            GM_PUBLISH_METHOD_MAP = {
                init: {key: "init", relyInit: !1, title: "初始化", code: 'demo1.initGM(document.querySelector("table"));'},
                get: {key: "get", relyInit: !0, title: "获取表格的实时配置信息", code: `GridManager.get('${gridManagerName}');`},
                version: {key: "version", relyInit: !1, title: "获取当前GridManager的版本号", code: "GridManager.version;"},
                getLocalStorage: {
                    key: "getLocalStorage",
                    relyInit: !0,
                    title: "获取表格用户记忆",
                    code: `GridManager.getLocalStorage('${gridManagerName}');`
                },
                resetLayout: {
                    key: "resetLayout",
                    relyInit: !0,
                    title: "重置表格布局",
                    code: `GridManager.resetLayout('${gridManagerName}', '800px', '500px');`
                },
                clear: {
                    key: "clear",
                    relyInit: !0,
                    title: "清除表格记忆数据",
                    code: `GridManager.clear('${gridManagerName}');`
                },
                getTableData: {
                    key: "getTableData",
                    relyInit: !0,
                    title: "获取指定tr所使用的数据",
                    code: `GridManager.getTableData('${gridManagerName}');`
                },
                getRowData: {
                    key: "getRowData",
                    relyInit: !0,
                    title: "获取指定tr所使用的数据",
                    code: `GridManager.getRowData('${gridManagerName}', document.querySelector("table[grid-manager=${gridManagerName}] tbody tr"));`
                },
                updateRowData: {
                    key: "updateRowData",
                    relyInit: !0,
                    title: "更新指定行所使用的数据",
                    code: `GridManager.updateRowData('${gridManagerName}', 'id', {id: 112, title: 'ccc'});`
                },
                updateTreeState: {
                    key: "updateTreeState",
                    relyInit: !0,
                    title: "更新树的展开状态",
                    code: `GridManager.updateTreeState('${gridManagerName}', true);`
                },
                setSort: {
                    key: "setSort",
                    relyInit: !0,
                    title: "手动设置排序",
                    code: `GridManager.setSort('${gridManagerName}', {createDate: 'ASC'});`
                },
                setConfigVisible: {
                    key: "setConfigVisible",
                    relyInit: !0,
                    title: "设置表头配置区域可视状态",
                    code: `GridManager.setConfigVisible('${gridManagerName}', true);`
                },
                setLineHeight: {
                    key: "setLineHeight",
                    relyInit: !0,
                    title: "配置行的高度",
                    code: `GridManager.setLineHeight('${gridManagerName}', '70px');`
                },
                showTh: {
                    key: "showTh",
                    relyInit: !0,
                    title: "设置列为可视状态",
                    code: `GridManager.showTh('${gridManagerName}', 'pic');`
                },
                hideTh: {
                    key: "hideTh",
                    relyInit: !0,
                    title: "设置列为隐藏状态",
                    code: `GridManager.hideTh('${gridManagerName}', 'pic');`
                },
                exportGrid: {
                    key: "exportGrid",
                    relyInit: !0,
                    title: "导出指定表格",
                    code: `GridManager.exportGrid('${gridManagerName}', 'demo中使用的导出').then(res=>{console.log('success')}).catch(err=>{console.error('error', err)});`
                },
                setQuery: {
                    key: "setQuery",
                    relyInit: !0,
                    title: "更改在生成组件时所配置的参数query",
                    code: `GridManager.setQuery('${gridManagerName}', {'userName':'baukh','sex':'男'});`
                },
                setAjaxData: {
                    key: "setAjaxData",
                    relyInit: !0,
                    title: "用于再次配置ajaxData数据",
                    code: `GridManager.setAjaxData('${gridManagerName}', {data: [{title: '通过setAjaxData动态添加的数据，其它项为空'}], totals: 1});`
                },
                refreshGrid: {
                    key: "refreshGrid",
                    relyInit: !0,
                    title: "刷新表格",
                    code: `GridManager.refreshGrid('${gridManagerName}');`
                },
                renderGrid: {
                    key: "renderGrid",
                    relyInit: !0,
                    title: "渲染表格",
                    code: `GridManager.renderGrid('${gridManagerName}');`
                },
                getCheckedTr: {
                    key: "getCheckedTr",
                    relyInit: !0,
                    title: "获取当前选中的行",
                    code: `GridManager.getCheckedTr('${gridManagerName}');`
                },
                getCheckedData: {
                    key: "getCheckedData",
                    relyInit: !0,
                    title: "获取选中行的渲染数据",
                    code: `GridManager.getCheckedData('${gridManagerName}');`
                },
                setCheckedData: {
                    key: "setCheckedData",
                    relyInit: !0,
                    title: "设置选中的数据",
                    code: `GridManager.setCheckedData('${gridManagerName}', [GridManager.getTableData('${gridManagerName}')[1]]);`
                },
                cleanData: {
                    key: "cleanData",
                    relyInit: !0,
                    title: "清除指定表格数据",
                    code: `GridManager.cleanData('${gridManagerName}');`
                },
                print: {key: "print", relyInit: !0, title: "打印当前页", code: `GridManager.print('${gridManagerName}');`},
                showRow: {
                    key: "showRow",
                    relyInit: !0,
                    title: "显示隐藏行",
                    code: `GridManager.showRow('${gridManagerName}', 1);`
                },
                hideRow: {
                    key: "hideRow",
                    relyInit: !0,
                    title: "隐藏行",
                    code: `GridManager.hideRow('${gridManagerName}', 1);`
                },
                showLoading: {
                    key: "showLoading",
                    relyInit: !0,
                    title: "显示加载中",
                    code: `GridManager.showLoading('${gridManagerName}');`
                },
                hideLoading: {
                    key: "hideLoading",
                    relyInit: !0,
                    title: "隐藏加载中",
                    code: `GridManager.hideLoading('${gridManagerName}', 300);`
                },
                destroy: {
                    key: "destroy",
                    relyInit: !0,
                    title: "消毁指定的GridManager实例",
                    code: `GridManager.destroy('${gridManagerName}');`
                }
            }, arg = {
                gridManagerName: "test",
                width: "100%",
                height: "100%",
                autoOrderConfig: {fixed: "left"},
                checkboxConfig: {key: "id", fixed: "left"},
                supportAjaxPage: !0,
                sortMode: "single",
                supportMenu: !0,
                menuHandler: e => (e.unshift({
                    content: "自定义菜单", line: !0, onClick: e => {
                        alert(e)
                    }
                }), e),
                useCellFocus: !0,
                useHideRow: !0,
                supportMoveRow: !0,
                moveRowConfig: {
                    key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                        console.log(e, t)
                    }
                },
                disableCache: !1,
                ajaxData: function (e, t) {
                    return "/personnel/TravelReport.html"
                },
                exportConfig: {
                    fileName: e => {
                        const t = new Date;
                        let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                        for (let t in e) a = `${a}-${t}=${e[t]}`;
                        return a
                    }, suffix: "xls"
                },
                ajaxType: "POST",
                checkedBefore: function (e, t, a) {
                    return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
                },
                checkedAfter: function (e, t, a) {
                    checked_id_list = []
                    for (var jj=0; jj<e.length; jj++) {
                        if (!checked_id_list.includes(e[jj].id)) {
                            checked_id_list.push(e[jj].id)
                        }
                     }
                },
                checkedAllBefore: function (e, t) {
                    {#console.log("checkedAllBefore==", e, t)#}
                },
                checkedAllAfter: function (e, t) {
                    console.log("checkedAllAfter==", e, t)
                },
                sortingBefore: function (e) {
                    {#console.log("sortingBefore", e)#}
                },
                sortingAfter: function (e) {
                    {#console.log("sortingAfter", e)#}
                },
                ajaxBeforeSend: function (e) {
                    console.log("ajaxBeforeSend")
                },
                ajaxSuccess: function (e) {
                    {#console.log("ajaxSuccess: ", JSON.parse(e)["data"])#}
                    window.JSONdetail = JSON.parse(e)["data"]
                },
                ajaxError: function (e) {
                    console.log("ajaxError")
                },
                ajaxComplete: function (e) {
                    console.log("ajaxComplete")
                },
                adjustBefore: e => {
                    console.log("adjustBefore=>", e)
                },
                adjustAfter: e => {
                    console.log("adjustAfter=>", e)
                },
                responseHandler: e => (e.data.forEach((e => {
                    e.priority = e.id
                })), e),
                rowRenderHandler: (e, t) => e,
                emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
                columnData: [
                    {
                        key: "subject",
                        text: "申请事由",
                        align: "center",
                        disableMoveRow: !0
                    }, {
                        key: "company",
                        text: "申请部门",
                        align: "center",
                    }, {
                        key: "travel_type",
                        text: "出差类型",
                        align: "center",
                    }, {
                        key: "travel_people",
                        text: "出差人员",
                        align: "left",
                    }, {
                        key: "start_time",
                        text: "出差开始时间",
                        align: "center",
                    }, {
                        key: "end_time",
                        text: "出差结束时间",
                        align: "center",
                    }, {
                        key: "route",
                        text: "地点",
                        align: "center",
                    }, {
                        key: "note",
                        text: "备注",
                        align: "center",
                    }, {
                        key: "action",
                        width: "100px",
                        align: "center",
                        fixed: "right",
                        disableMoveRow: !0,
                        disableRowCheck: !0,
                        text: '<span style="color: red">操作</span>',
                        template: (e, t) => `<a class="plugin-action" href="/finance/travel_apply_detail_view?id=${t.id}">查看</a>`
                    }]
            }, demo1 = {
                initSearch: function () {
                    document.querySelector(".search-action").addEventListener("click", (function () {
                        var StartTime = document.getElementById("StartTime").value;
                        var EndTime = document.getElementById("EndTime").value;
                        var travel_type = document.getElementById("travel_type").value;
                        if (StartTime){
                            if (!EndTime) {
                                alert("请选择用车结束时间！")
                            }
                        }

                        if (EndTime){
                            if (!StartTime) {
                                alert("请选择用车开始时间！")
                            }
                        }

                        var e = {
                            search_value: document.getElementById("search_data").value,
                            StartTime: StartTime,
                            EndTime: EndTime,
                            travel_type: travel_type
                        };
                        table.GM("setQuery", e, (function () {
                            console.log("setQuery执行成功````````````````", e)
                        }))

                    }))
                }, initFN: () => {

                }, initGM: function () {
                    new window.GridManager(table, arg, (e => {
                        console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                    }))
                }, editRowData: function (e) {
                    window.GridManager.updateRowData("test", "id", {
                        id: window.parseInt(e.getAttribute("data-id")),
                        lastDate: (new Date).getTime()
                    })
                }
            }, table = document.querySelector("table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

    </script>
{% endblock %}
